<template>
	<view>
		<view class="total-salary">
			<p style="color: #CCCCCC ;">Total Salary</p>
			<P style="font-size: 60rpx; margin-top: ;">${{salary.totalAmount?salary.totalAmount:0}}</P>
		</view>
		<view class="salary-list">
			<uni-datetime-picker v-model="queryParams.betweenTime" start-placeholder="start" end-placeholder="end"
				:clear-icon="false" type="daterange" rangeSeparator="--" @change="change" />
			<uni-list>
				<uni-list-item class="list-item" :to="`./components/report?cmsType=`+40">
					<template v-slot:header>
						<image class="slot-image" src="@/static/img/other.png" mode="widthFix"></image>
					</template>
					<template v-slot:body>
						<view class="connect">
							<view class="top">
								<text class="slot-box slot-text">Others</text>
								<text class="slot-box slot-text">$ {{salary.paidOthers?salary.paidOthers:0}} / ${{salary.totalOthers?salary.totalOthers:0}}</text>
							</view>
							<view class="progress-box">
								<progress :percent="Otherspercent?Otherspercent:0" :active="true" duration="10" activeColor="#10AEFF"
									stroke-width="7" border-radius="100" />
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item class="list-item" :to="`./components/report?cmsType=`+30">
					<template v-slot:header>
						<image class="slot-image" src="@/static/img/Auto Layout Horizontal.png" mode="widthFix"></image>
					</template>
					<template v-slot:body>
						<view class="connect">
							<view class="top">
								<text class="slot-box slot-text">Report</text>
								<text class="slot-box slot-text">$ {{salary.paidReport?salary.paidReport:0}} / $ {{salary.totalReport?salary.totalReport:0}}</text>
							</view>
							<view class="progress-box">
								<progress :percent="Reportpercent?Reportpercent:0" :active="true" duration="10" activeColor="#10AEFF"
									stroke-width="7" border-radius="100" />
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import common from "@/api/common.js"
	import login from "../../api/login"
	export default {
		data() {
			return {
				startTime: '',
				endTime: '',
				queryParams: {
					betweenTime: []
				},
				salary: {
					unpaidReport: 0,
					paidReport: 0,
					payableReport: 0,
					totalReport: 0,
					unpaidOthers: 0,
					paidOthers: 0,
					payableOthers: 0,
					totalOthers: 0,
					totalAmount: 0
				},
				Otherspercent:'',
				Reportpercent:'',
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				common.getFinance(this.queryParams).then((res) => {
					this.salary = res.data.list.data
					this.Otherspercent=(res.data.list.data.paidOthers/res.data.list.data.totalOthers)*100
					this.Reportpercent=(res.data.list.data.paidReport/res.data.list.data.totalReport)*100
				})
			},
			change(e) {
				uni.showLoading({
					title: 'Loading'
				});
				this.queryParams.page = 1; // 重置页码为1
				// this.salary = []; 
				this.debounce(() => {
					this.getList()
				}, 500);
			}
		}
	}
</script>

<style scoped>
	page {
		background: url(../../static/img/finance-bgi.png) repeat fixed center;
		background-size: 750rpx 1624rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.total-salary {
		height: 212rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 48rpx 0;
	}

	.salary-list {
		width: 750rpx;
		height: 1330rpx;
		background: #FCFCFC;
		box-shadow: 0rpx -32rpx 80rpx 2rpx rgba(7, 31, 15, 0.2);
		border-radius: 80rpx 80rpx 0 0;
		padding: 38rpx 44rpx 0;
	}

	.search-time {
		width: 662rpx;
		height: 66rpx;
		background: #1C2026;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		border-radius: 100rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 66rpx;
	}

	::v-deep .uni-date-x--border {
		border: none !important;
	}

	::v-deep .uni-date-x {
		border: none !important;
		background: #1C2026;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(174, 174, 174, 0.16);
		margin-bottom: 25rpx;
		border-radius: 100rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 66rpx;
	}

	.slot-image {
		width: 130rpx;
		height: 126rpx;
	}

	.connect {
		padding: 22rpx;

	}

	.connect .top {
		display: flex;
		justify-content: space-between
	}

	.connect .progress-box {
		width: 449rpx;
		height: 14rpx;
		margin-top: 20rpx;
	}
</style>